概述

您所在的位置：网站首页 › nodejs 更新 Excel › 概述

概述

2023-12-13 14:49| 来源: 网络整理| 查看: 265

SheetJS CE

SheetJS 社区版提供经过实战检验的开源解决方案，用于从几乎任何复杂的电子表格中提取有用的数据，并生成可与传统软件和现代软件一起使用的新电子表格。

SheetJS 专业版提供数据处理之外的解决方案：轻松编辑复杂模板；用样式释放你内心的毕加索；使用图片/图表/数据透视表制作自定义工作表；评估公式表达式并将计算移植到 Web 应用；自动执行常见的电子表格任务等等！

简单的例子

代码编辑器已上线 - 请随意编辑！它们使用 ReactJS 组件并完全在 Web 浏览器中运行。

将 HTML 表格导出到 Excel XLSX如何添加到你的网站 （点击显示）HTMLReact

1) 确保你的表格有一个 ID：

2) 在页面中包含对 SheetJS 库的引用：

3) 添加一个按钮，用户单击该按钮即可生成导出

Export as XLSX

4) 添加 click 事件的事件处理程序以将表数据导出到 XLSX：

document.getElementById("sheetjsexport").addEventListener('click', function() { /* Create worksheet from HTML DOM TABLE */ var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport")); /* Export to file (start a download) */ XLSX.writeFile(wb, "SheetJSTable.xlsx");});

此示例假设你有一个包含 HTML TABLE 元素的现有项目：

Sample Componentfunction App() { return ( SheetJS Table SheetJS Table Export AuthorID你好! SheetJS7262வணக்கம்! Powered by SheetJS )}export default App;

如果你是从头开始，请创建一个新的 ViteJS + ReactJS 项目：

npm create vite@latest -- sheetjs-react --template react --defaultcd sheetjs-reactnpm installnpm run dev

将 src/App.jsx 替换为示例组件。

1) 使用包管理器安装 SheetJS 库：

npmpnpmYarnnpm i --save https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgzpnpm install https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgzyarn add https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz

2) 确保你的组件脚本从 react 库导入 useRef：

import { useRef } from "react";

3) 在组件脚本的顶部添加以下行：

import { utils, writeFileXLSX } from "xlsx";

4）在函数组件的主体中创建一个引用：

function App() { const tbl = useRef(null); // ...

5) 将 ref 附加到表元素：

function App() { // ... return ( {/*...*/} {/*...*/}

6) 添加一个带有单击处理程序的按钮，用于将表数据导出到 XLSX：

function App() { // ... return ( {/*...*/} { // generate workbook from table element const wb = utils.table_to_book(tbl.current); // write to XLSX writeFileXLSX(wb, "SheetJSReactExport.xlsx"); }}>Export XLSX {/*...*/}如何使用 NodeJS 实现自动化 （点击显示）

"无头自动化" 演示包括使用 puppeteer 和 playwright 浏览器自动化框架的完整示例。

在线示例 （点击隐藏）ResultLoading...Live Editor/* The live editor requires this function wrapper */function Table2XLSX(props) { /* Callback invoked when the button is clicked */ const xport = React.useCallback(() => { /* Create worksheet from HTML DOM TABLE */ const table = document.getElementById("Table2XLSX"); const wb = XLSX.utils.table_to_book(table); /* Export to file (start a download) */ XLSX.writeFile(wb, "SheetJSTable.xlsx"); }); return ( SheetJS Table Export AuthorID你好! SheetJS7262வணக்கம்! Powered by SheetJS Export XLSX! );}SheetJS Pro 基础版通过支持 CSS 样式和富文本扩展了此导出。下载并预览 Apple Numbers 工作簿如何添加到你的网站 （点击显示）

1) 为表格创建容器 DIV：

2) 在页面中包含对 SheetJS 库的引用：

3) 添加脚本块来下载和更新页面：

(async() => { /* replace with the URL of the file */ const URL_TO_DOWNLOAD = "https://sheetjs.com/pres.numbers"; const ab = await (await fetch(URL_TO_DOWNLOAD)).arrayBuffer(); /* Parse file and get first worksheet */ const wb = XLSX.read(ab); const wsname = wb.SheetNames[0]; const ws = wb.Sheets[wsname]; /* Generate HTML */ var output = document.getElementById("TableContainer"); output.innerHTML = XLSX.utils.sheet_to_html(ws);})();在线示例 （点击隐藏）

该演示处理 https://sheetjs.com/pres.numbers

ResultLoading...Live Editor/* The live editor requires this function wrapper */function Numbers2HTML(props) { const [__html, setHTML] = React.useState(""); /* Fetch and update HTML */ React.useEffect(async() => { /* Fetch file */ const f = await fetch("https://sheetjs.com/pres.numbers"); const ab = await f.arrayBuffer(); /* Parse file */ const wb = XLSX.read(ab); const ws = wb.Sheets[wb.SheetNames[0]]; /* Generate HTML */ setHTML(XLSX.utils.sheet_to_html(ws)); }, []); return ( );}SheetJS Pro 基础版通过支持 CSS 样式和富文本扩展了此导入。在你的设备上预览工作簿在线示例 （点击隐藏）

此示例从 CSV 字符串开始。使用文件输入元素选择要加载的工作簿。使用 "导出 XLSX" 按钮将表写入 XLSX。

ResultLoading...Live Editor/* The live editor requires this function wrapper */function Tabeller(props) { const [__html, setHTML] = React.useState(""); /* Load sample data once */ React.useEffect(() => { /* Starting CSV data -- change data here */ const csv = `\This,is,a,Testவணக்கம்,สวัสดี,你好,가지마1,2,3,4`; /* Parse CSV into a workbook object */ const wb = XLSX.read(csv, {type: "string"}); /* Get the worksheet (default name "Sheet1") */ const ws = wb.Sheets.Sheet1; /* Create HTML table */ setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" })); }, []); return ( {/* Import Button */} { /* get data as an ArrayBuffer */ const file = e.target.files[0]; const data = await file.arrayBuffer(); /* parse and load first worksheet */ const wb = XLSX.read(data); const ws = wb.Sheets[wb.SheetNames[0]]; setHTML(XLSX.utils.sheet_to_html(ws, { id: "tabeller" })); }}/> {/* Export Button */} { /* Create worksheet from HTML DOM TABLE */ const table = document.getElementById("tabeller"); const wb = XLSX.utils.table_to_book(table); /* Export to file (start a download) */ XLSX.writeFile(wb, "SheetJSIntro.xlsx"); }}>Export XLSX! {/* Show HTML preview */} );}浏览器测试支持的文件格式

【本文地址】

概述

概述

今日新闻

推荐新闻